@charset "utf-8";
@import "reset";
@function widthset($w){
    @return ($w/1200*100%);
}

body{
    min-width: 1200px;
}

.web{
    width: widthset(1200);
}



.main{
    width: 84%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 40px;
    
    .location{
        font-size: 0;
        margin-top: 18px;
        position: absolute;
        right: 0;
        
        i{
            color: #989898;
        }
        p{
            display: inline-block;
            font-size: 16px;
            margin-left: 8px;
            
            a{
                color: #989898;
            }
            span{
                margin-left: 8px;
                margin-right: 8px;
            }
        }
    }
    .content{
        overflow: hidden;

        .contentLeft{
            width: 17%;
            padding-top: 40px;
            
            .titleLeft{
                padding-bottom: 20px;
                padding-left: 10px;
                border-bottom: 2px solid #656565;
                
                p{
                    font-size: 16px;
                    line-height: 28px;
                    color: #666;
                }
                p:last-of-type{
                    font-size: 26px;
                    line-height: 40px;
                }
            }
            >ul>li{
                height: 60px;
                padding-left: 10px;
                border-bottom: 1px solid #E6E6E6;
                color: #636363;
                font-size: 16px;
                vertical-align: middle;
                position: relative;
                cursor: pointer;
                line-height: 60px;
                
                label{
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                    
                    >img{
                        position: absolute;
                        top: 20px;
                        right: widthset(130);
                        display: none;
                    }
                }
            }
            >ul>li:hover{
                background: #7698d5;
            }
            >ul>li:hover{
                color: white;
            }
            >ul>li:hover>label>img{
                display: block;
            }
        }
    }
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

#dynamic_content,
#media_content {
    display: none;
    opacity: 0;
}

input[type="radio"] {
    display: none;
}

input[id="dynamic"]:checked~.contentLeft #nav_dynamic{
    display: block;
}
input[id="dynamic"]:checked~.contentRight #dynamic_content {
    display: block;
    opacity: 1;
    animation: jackInTheBox 2s;
}
input[id="media"]:checked~.contentLeft #nav_media{
    display: block;
}
input[id="media"]:checked~.contentRight #media_content {
    display: block;
    opacity: 1;
    animation: swing 1.5s;
}

.contentRight{
    margin-top: 88px;
    margin-left: widthset(290);
    
    #dynamic_content{
        margin-bottom: 20px;
        
        >p{
            font-size: 18px;
            color: #626262;
            line-height: 26px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        >img{
            width: 44.4%;
        }
        >.list{
            display: inline-block;
            vertical-align: top;
            margin-left: 4%;
            
            >.fiveList{
                position: relative;
                width: 112%;
                
                .circle{
                    width: 16px;
                    height: 16px;
                    border-radius: 8px;
                    background: #3BB7EB;
                    position: absolute;
                    left: 0;
                    top: 8%;
                }
                >p{
                    color: #787878;
                    margin-left: 10%;
                    margin-bottom: 16px;
                }
                >p:last-of-type{
                    font-size: 14px;
                    color: #9D9D9D;
                    margin-bottom: 38px;
                }
            }
            >p{
                width: 112%;
                text-align: right;
                
                >a{
                    font-size: 14px;
                    color: #75A1AA;
                    display: inline-block;
                }
                >a:hover{
                    animation: jello 1s;
                }
            }
        }
    }
    #media_content{
        margin-bottom: 20px;
        text-align: center;
        
        .mediaBlock{
            width: 28%;
            display: inline-block;
            border: 1px solid #E4E4E4;
            margin: 0 1%;
            margin-bottom: 30px;
            
            >div{
                width: 100%;
                overflow: hidden;
                
                >img{
                    width: 100%;
                    cursor: pointer;
                }
                >img:hover{
                    transform: scale(1.2);
                    transition: transform 0.5s;
                }
            }
            >p{
                font-size: 18px;
                color: #656565;
                font-weight: bold;
                text-align: left;
                margin-bottom: 35px;
                line-height: 28px;
                padding-left: 5%;
                padding-right: 5%;
                cursor: pointer;
            }
            >p:hover{
                color: #75A1AA;
            }
            >p:first-of-type{
                margin-top: 15px;
            }
            >p:last-of-type{
                text-align: right;
                margin-bottom: 5px;
                
                >a{
                    font-size: 14px;
                    color: #75A1AA;
                    display: inline-block;
                }
                >a:hover{
                    animation: jello 1s;
                }
            }
        }
    }
}